<template>
  <div class="app-container">
    <el-row class="topNum" :gutter="0">
      <el-col :span="8" class="topText topBorder">
        <h4>总场站数</h4>
        <p style="color:#2727FF">{{statusCount.total}}个</p>
      </el-col>
      <el-col :span="8" class="topText topBorder">
        <h4>启用场站</h4>
        <p style="color:#7BAF2A">{{statusCount.yesNum}}个</p>
      </el-col>
      <el-col :span="8" class="topText topBorder">
        <h4>停用场站</h4>
        <p style="color:#E1273E">{{statusCount.noNum}}个</p>
      </el-col>
    </el-row>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <!--<el-form-item label="场站编号" prop="chargeStationCode">
        <el-input
          v-model="queryParams.chargeStationCode"
          placeholder="请输入场站编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="运营商编号" prop="operatorCode">
        <el-input
          v-model="queryParams.operatorCode"
          placeholder="请输入运营商编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>-->
      <el-form-item label="运营商" prop="chargeStationType">
        <el-select v-model="queryParams.operatorCode" placeholder="请选择运营商信息" style="width: 100%">
          <el-option v-for="dict in userList" :key="dict.operatorCode" :label="dict.operatorName"
                     :value="dict.operatorCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="场站名称" prop="chargeStationName">
        <el-input v-model="queryParams.chargeStationName" placeholder="请输入场站名称" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="场站类型" prop="chargeStationType">
        <el-select v-model="queryParams.chargeStationType" placeholder="请选择场站类型" clearable>
          <el-option v-for="dict in dict.type.charge_station_type" :key="dict.value" :label="dict.label"
                     :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="场站状态" prop="chargeStationStatus">
        <el-select v-model="queryParams.chargeStationStatus" placeholder="请选择场站状态" clearable>
          <el-option v-for="dict in dict.type.charge_station_status" :key="dict.value" :label="dict.label"
                     :value="dict.value"/>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="行政区域" prop="administrativeArea">
        <el-input
          v-model="queryParams.administrativeArea"
          placeholder="请输入行政区域"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="chargeStationAddress">
        <el-input
          v-model="queryParams.chargeStationAddress"
          placeholder="请输入详细地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="经度" prop="chargeStationLongitude">
        <el-input
          v-model="queryParams.chargeStationLongitude"
          placeholder="请输入经度"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="纬度" prop="chargeStationLatitude">
        <el-input
          v-model="queryParams.chargeStationLatitude"
          placeholder="请输入纬度"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="免费停车" prop="parking">
        <el-select v-model="queryParams.parking" placeholder="请选择免费停车" clearable>
          <el-option
            v-for="dict in dict.type.parking"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="停车费编号" prop="parkingRate">
        <el-input
          v-model="queryParams.parkingRate"
          placeholder="请输入停车费编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务费编号" prop="serviceCharge">
        <el-input
          v-model="queryParams.serviceCharge"
          placeholder="请输入服务费编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="营业开始时间" prop="chargeStationStartTime">
        <el-date-picker clearable
                        v-model="queryParams.chargeStationStartTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择营业开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="营业结束时间" prop="chargeStationEndTime">
        <el-date-picker clearable
                        v-model="queryParams.chargeStationEndTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择营业结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="小程序名称" prop="appletName">
        <el-select v-model="queryParams.appletName" placeholder="请选择小程序名称" clearable>
          <el-option
            v-for="dict in dict.type.applet_name"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="场站评分" prop="chargeStationScore">
        <el-input
          v-model="queryParams.chargeStationScore"
          placeholder="请输入场站评分"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="场站电话" prop="chargeStationPhone">
        <el-input
          v-model="queryParams.chargeStationPhone"
          placeholder="请输入场站电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="场站备注" prop="chargeStationRemark">
        <el-input
          v-model="queryParams.chargeStationRemark"
          placeholder="请输入场站备注"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['operator:station:add']">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                   v-hasPermi="['operator:station:remove']">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                   v-hasPermi="['operator:station:export']">导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="resetQuery"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="stationList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <!--<el-table-column label="场站id" align="center" prop="chargeStationId" />-->
      <el-table-column label="场站编号" align="center" prop="chargeStationCode"/>
      <el-table-column label="运营商编号" align="center" prop="operatorCode"/>
      <el-table-column label="场站名称" align="center" prop="chargeStationName"/>
      <el-table-column label="场站电话" align="center" prop="chargeStationPhone"/>
      <el-table-column label="场站类型" align="center" prop="chargeStationType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.charge_station_type" :value="scope.row.chargeStationType"/>
        </template>
      </el-table-column>
      <el-table-column label="场站状态" align="center" prop="chargeStationStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.charge_station_status" :value="scope.row.chargeStationStatus"/>
        </template>
      </el-table-column>
      <!--<el-table-column label="行政区域" align="center" prop="administrativeArea" />-->
      <el-table-column label="详细地址" align="center" prop="chargeStationAddress"/>
      <!--<el-table-column label="经度" align="center" prop="chargeStationLongitude" />
      <el-table-column label="纬度" align="center" prop="chargeStationLatitude" />
      <el-table-column label="国标接口" align="center" prop="nationalStandardInterface">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.national_standard_interface" :value="scope.row.nationalStandardInterface ? scope.row.nationalStandardInterface.split(',') : []"/>
        </template>
      </el-table-column>
      <el-table-column label="辅源电压" align="center" prop="auxiliarySourceVoltage">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.auxiliary_source_voltage" :value="scope.row.auxiliarySourceVoltage ? scope.row.auxiliarySourceVoltage.split(',') : []"/>
        </template>
      </el-table-column>
      <el-table-column label="枪类型" align="center" prop="gunType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.gun_type" :value="scope.row.gunType ? scope.row.gunType.split(',') : []"/>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center" prop="paymentMethod">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_method" :value="scope.row.paymentMethod ? scope.row.paymentMethod.split(',') : []"/>
        </template>
      </el-table-column>-->
      <el-table-column label="免费停车" align="center" prop="parking">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.parking" :value="scope.row.parking"/>
        </template>
      </el-table-column>
      <!-- <el-table-column label="停车费编号" align="center" prop="parkingRate" />
      <el-table-column label="服务费编号" align="center" prop="serviceCharge" />-->
      <!--<el-table-column label="营业开始时间" align="center" prop="chargeStationStartTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.chargeStationStartTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="营业结束时间" align="center" prop="chargeStationEndTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.chargeStationEndTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>-->
      <el-table-column label="营业开始时间" align="center" prop="chargeStationStartTime"/>
      <el-table-column label="营业结束时间" align="center" prop="chargeStationEndTime"/>
      <!-- <el-table-column label="支付渠道" align="center" prop="paymentChannels">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_channels" :value="scope.row.paymentChannels ? scope.row.paymentChannels.split(',') : []"/>
        </template>
      </el-table-column>
      <el-table-column label="小程序名称" align="center" prop="appletName">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.applet_name" :value="scope.row.appletName"/>
        </template>
      </el-table-column>
      <el-table-column label="场站设施" align="center" prop="chargeStationFacilities">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.charge_station_facilities" :value="scope.row.chargeStationFacilities ? scope.row.chargeStationFacilities.split(',') : []"/>
        </template>
      </el-table-column>
      <el-table-column label="场站评分" align="center" prop="chargeStationScore" />
      <el-table-column label="场站照片" align="center" prop="chargeStationPhoto" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.chargeStationPhoto" :width="50" :height="50"/>
        </template>
      </el-table-column>-->
      <!--
      <el-table-column label="场站备注" align="center" prop="chargeStationRemark" />
-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-right" @click="viewStationInfo(scope.row)"
                     v-hasPermi="['operator:station:query']">详情
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['operator:station:edit']">修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['operator:station:remove']">删除
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-setting" @click="handlePrices(scope.row)"
                     v-hasPermi="['operator:station:remove']">调整电价
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

    <!-- 添加或修改场站对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="场站编号" prop="chargeStationCode">
          <el-input v-model="form.chargeStationCode" placeholder="请输入场站编号"/>
        </el-form-item>
        <!--<el-form-item label="运营商编号" prop="operatorCode">
          <el-input v-model="form.operatorCode" placeholder="请输入运营商编号" />
        </el-form-item>-->
        <el-form-item label="运营商编号" prop="operatorCode">
          <el-select v-model="form.operatorCode" placeholder="请选择运营商信息" style="width: 100%">
            <el-option v-for="dict in userList" :key="dict.operatorCode" :label="dict.operatorName"
                       :value="dict.operatorCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属商户" prop="mchId">
          <el-select v-model="form.mchId" placeholder="请选择所属商户" style="width: 100%">
            <el-option v-for="dict in mchList" :key="dict.mchId" :label="dict.name" :value="dict.mchId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场站名称" prop="chargeStationName">
          <el-input v-model="form.chargeStationName" placeholder="请输入场站名称"/>
        </el-form-item>
        <el-form-item label="场站电话" prop="chargeStationPhone">
          <el-input v-model="form.chargeStationPhone" placeholder="请输入场站电话"/>
        </el-form-item>
        <el-form-item label="建筑场所" prop="buildingSite">
          <el-select v-model="form.buildingSite" placeholder="请选择建筑场所" style="width: 100%">
            <el-option v-for="dict in dict.type.building_site" :key="dict.value" :label="dict.label"
                       :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="chargeStationAddress">
          <el-input v-model="form.chargeStationAddress" placeholder="请输入详细地址"/>
        </el-form-item>
        <el-form-item label="车位数量" prop="parkNum">
          <el-input-number v-model="form.parkNum" :min="1" :max="999999" placeholder="请输入车位数量"/>
        </el-form-item>
        <el-form-item label="场站类型">
          <el-radio-group v-model="form.chargeStationType">
            <el-radio v-for="dict in dict.type.charge_station_type" :key="dict.value" :label="dict.value">
              {{dict.label}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="场站状态">
          <el-radio-group v-model="form.chargeStationStatus">
            <el-radio v-for="dict in dict.type.charge_station_status" :key="dict.value" :label="dict.value">
              {{dict.label}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="行政区域" prop="administrativeArea">
          <el-input v-model="form.administrativeArea" placeholder="请输入行政区域" />
        </el-form-item>-->
        <!-- <el-form-item label="经度" prop="chargeStationLongitude">
          <el-input v-model="form.chargeStationLongitude" placeholder="请输入经度" />
        </el-form-item>
        <el-form-item label="纬度" prop="chargeStationLatitude">
          <el-input v-model="form.chargeStationLatitude" placeholder="请输入纬度" />
        </el-form-item>-->
        <el-form-item label="经纬度" prop="location">
          <el-input placeholder="请选择经纬度" :disabled="true" v-model="form.location">
            <template slot="append">
              <div @click="selectLocationFun">选择位置</div>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="国标接口">
          <el-checkbox-group v-model="form.nationalStandardInterface">
            <el-checkbox v-for="dict in dict.type.national_standard_interface" :key="dict.value" :label="dict.value">
              {{dict.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="辅源电压">
          <el-checkbox-group v-model="form.auxiliarySourceVoltage">
            <el-checkbox v-for="dict in dict.type.auxiliary_source_voltage" :key="dict.value" :label="dict.value">
              {{dict.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="枪类型">
          <el-checkbox-group v-model="form.gunType">
            <el-checkbox v-for="dict in dict.type.gun_type" :key="dict.value" :label="dict.value">
              {{dict.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="价格类型" prop="priceTypeCode">
          <el-select v-model="form.priceTypeCode" placeholder="请选择价格类型" style="width: 100%">
            <el-option v-for="dict in priceTypeList" :key="dict.priceTypeCode" :label="dict.priceTypeName"
                       :value="dict.priceTypeCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-checkbox-group v-model="form.paymentMethod">
            <el-checkbox v-for="dict in dict.type.payment_method" :key="dict.value" :label="dict.value">
              {{dict.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="免费停车">
          <el-radio-group v-model="form.parking">
            <el-radio v-for="dict in dict.type.parking" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="停车费编号" prop="parkingRate">
          <el-input v-model="form.parkingRate" placeholder="请输入停车费编号"/>
        </el-form-item>
        <el-form-item label="服务费编号" prop="serviceCharge">
          <el-input v-model="form.serviceCharge" placeholder="请输入服务费编号"/>
        </el-form-item>
        <!-- <el-form-item label="营业开始时间" prop="chargeStationStartTime">
          <el-date-picker clearable
                          v-model="form.chargeStationStartTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择营业开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="营业结束时间" prop="chargeStationEndTime">
          <el-date-picker clearable
                          v-model="form.chargeStationEndTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择营业结束时间">
          </el-date-picker>
        </el-form-item>-->

        <el-form-item label="营业时间" prop="chargeStationEndTime">
          <!-- <template>
            <el-time-select
              placeholder="起始时间"
              v-model="form.chargeStationStartTime"
              :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '23:59'
              }">
            </el-time-select>
            <el-time-select
              placeholder="结束时间"
              v-model="form.chargeStationEndTime"
              :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '23:59',
              minTime: form.chargeStationStartTime
              }">
            </el-time-select>
          </template>-->
          <template>
            <el-time-picker v-model="form.chargeStationStartTime" :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
              }" placeholder="开始时间" format="HH:mm:ss" value-format="HH:mm:ss">
            </el-time-picker>
            <el-time-picker v-model="form.chargeStationEndTime" :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
              }" placeholder="结束时间" format="HH:mm:ss" value-format="HH:mm:ss">
            </el-time-picker>
          </template>
        </el-form-item>

        <el-form-item label="支付渠道">
          <el-checkbox-group v-model="form.paymentChannels">
            <el-checkbox v-for="dict in dict.type.payment_channels" :key="dict.value" :label="dict.value">
              {{dict.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="小程序名称">
          <el-radio-group v-model="form.appletName">
            <el-radio v-for="dict in dict.type.applet_name" :key="dict.value" :label="dict.value">{{dict.label}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="场站设施">
          <el-checkbox-group v-model="form.chargeStationFacilities">
            <el-checkbox v-for="dict in dict.type.charge_station_facilities" :key="dict.value" :label="dict.value">
              {{dict.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="场站评分" prop="chargeStationScore">
          <el-input v-model="form.chargeStationScore" placeholder="请输入场站评分"/>
        </el-form-item>
        <el-form-item label="场站照片">
          <image-upload v-model="form.chargeStationPhoto" :limit="1"/>
        </el-form-item>
        <el-form-item label="场站备注" prop="chargeStationRemark">
          <el-input v-model="form.chargeStationRemark" placeholder="请输入场站备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--  位置选择弹框  -->
    <el-dialog title="选择站点经纬度位置" :visible.sync="dialogVisibleMap" width="70%" :before-close="handleCloseMap">
      <el-input placeholder="请输入要选择的地址" v-model="form.deptName">
        <template slot="append">
          <el-button slot="append" icon="el-icon-search" @click="searchMapAddr"></el-button>
        </template>
      </el-input>
      <div style="height: 15px"></div>
      <div style="width: 100%;height: 70vh" id="map_container">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listStation,
    getStation,
    delStation,
    addStation,
    updateStation,
    getStatus
  } from '@/api/smart/operator/station'
  import { listPriceType } from '@/api/smart/operator/priceType'
  import { listUser } from '@/api/smart/operator/user'
  import { listMch } from '@/api/smart/operator/mch'
  import AMapLoader from '@amap/amap-jsapi-loader'

  export default {
    name: 'Station',
    dicts: ['gun_type', 'charge_station_type', 'charge_station_status', 'national_standard_interface', 'payment_method', 'auxiliary_source_voltage', 'payment_channels', 'applet_name', 'parking', 'charge_station_facilities', 'building_site'],
    data() {
      return {
        //地图弹窗
        dialogVisibleMap: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        codes: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 场站表格数据
        stationList: [],
        // 运营商用户表格数据
        userList: [],
        // 所属商户列表
        mchList: [],
        // 价格类型表格数据
        priceTypeList: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          chargeStationCode: null,
          operatorCode: null,
          chargeStationName: null,
          chargeStationType: null,
          chargeStationStatus: null,
          parkNum: null,
          buildingSite: null,
          administrativeArea: null,
          chargeStationAddress: null,
          chargeStationLongitude: null,
          chargeStationLatitude: null,
          nationalStandardInterface: null,
          auxiliarySourceVoltage: null,
          gunType: null,
          paymentMethod: null,
          parking: null,
          parkingRate: null,
          serviceCharge: null,
          chargeStationStartTime: null,
          chargeStationEndTime: null,
          paymentChannels: null,
          appletName: null,
          chargeStationFacilities: null,
          chargeStationScore: null,
          chargeStationPhoto: null,
          chargeStationPhone: null,
          chargeStationRemark: null,
          priceTypeCode: null
        },
        statusCount: {
          total: 0,
          yesNum: 0,
          noNum: 0
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          chargeStationCode: [{ required: true, message: '请输入场站编号', trigger: 'blur' }, {
            max: 20,
            message: '最大字符数不能超过20个字符！',
            trigger: 'blur'
          }],
          operatorCode: [{ required: true, message: '请选择运营商编号', trigger: 'change' }],
          mchId: [{ required: true, message: '请选择所属商户', trigger: 'change' }],
          chargeStationName: [{ required: true, message: '请输入场站名称', trigger: 'blur' }, {
            max: 50,
            message: '最大字符数不能超过50个字符！',
            trigger: 'blur'
          }],
          chargeStationAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }, {
            max: 50,
            message: '最大字符数不能超过50个字符！',
            trigger: 'blur'
          }],
          chargeStationPhone: [{ required: true, message: '请输入场站电话', trigger: 'blur' }, {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '手机号格式错误',
            trigger: 'blur'
          }],
          buildingSite: [{ required: true, message: '请选择建筑场所', trigger: 'change' }],
          parkNum: [{ required: true, message: '请输入车位数量', trigger: 'blur' }, {
            pattern: '/^[1-9]\\d$*/',
            message: '车位数量为正整数',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getList()
      this.getMchList()
      this.selectUser()
      this.getStationStatus()
    },
    methods: {
      handlePrices(row) {
        if (row.priceTypeId != null && row.priceTypeId != undefined && row.priceTypeId != '') {
          //跳转调整电价
          this.$router.push({
            name: 'adjustingPricesInfo',
            query: {
              priceTypeId: row.priceTypeId
            }
          })
        } else {
          return this.$modal.msgError('关联模版未设置电价')
        }
      },
      //获取设备状态统计
      getStationStatus() {
        this.loading = true
        getStatus().then(res => {
          this.statusCount = res.data
          this.loading = false
        })
      },
      /** 查询场站列表 */
      getList() {
        this.loading = true
        listStation(this.queryParams).then(response => {
          this.stationList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      /**选择位置按钮*/
      selectLocationFun() {
        this.dialogVisibleMap = true
        this.initMap()
      },
      /**关闭地图*/
      handleCloseMap() {
        this.dialogVisibleMap = false
      },
      selectUser() {
        /** 查询运营商用户列表 */
        listUser(this.queryParams).then(response => {
          this.userList = response.rows
        })
      },
      getMchList() {
        /** 查询运营商用户列表 */
        listMch().then(response => {
          this.mchList = response.data
        })
      },
      selectPriceTypeList() {
        listPriceType(this.queryParams).then(response => {
          this.priceTypeList = response.rows
        })
      },
      /**地图搜索按钮*/
      searchMapAddr() {
        var that = this
        var marker = new AMap.Marker()
        var address = that.form.deptName
        if (address) {
          that.geocoder.getLocation(address, function(status, result) {
            if (status === 'complete' && result.geocodes.length) {
              var lnglat = result.geocodes[0].location
              marker.setPosition(lnglat)
              marker.on('click', function(e) {
                that.form.location = e.lnglat.KL + ',' + e.lnglat.kT
                that.geocoder.getAddress(e.lnglat, function(status, result) {
                  if (status === 'complete' && result.regeocode) {
                    var address = result.regeocode.formattedAddress
                    that.form.address = address
                  } else {
                    console.log('根据经纬度查询地址失败')
                  }
                })
                that.dialogVisibleMap = false
              })
              that.map.add(marker)
              that.map.setFitView(marker)
            } else {
              console.log('根据地址查询位置失败')
            }
          })
        }
      },
      /**初始化地图*/
      initMap() {
        var that = this
        AMapLoader.load({
          key: 'b4a503ef1c7593b6d5c3112cae33f042', // 申请好的Web端开发者Key，首次调用 load 时必填
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ['AMap.Marker', 'AMap.Geocoder'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .then(AMap => {
            that.map = new AMap.Map('map_container', {
              //设置地图容器id
              viewMode: '3D', //是否为3D地图模式
              zoom: 8, //初始化地图级别
              center: [117.11913434399423, 36.64408747971226], //初始化地图中心点位置
              resizeEnable: true
            })
            that.geocoder = new AMap.Geocoder({
              city: '', //城市设为北京，默认：“全国”
              radius: 1000 //范围，默认：500
            })

            var marker = new AMap.Marker()
            that.map.on('click', function(e) {
              var lnglat = e.lnglat
              that.map.add(marker)
              marker.setPosition(lnglat)
              that.form.location = lnglat.KL + ',' + lnglat.kT
              that.form.chargeStationLongitude = lnglat.KL
              that.form.chargeStationLatitude = lnglat.kT
              that.geocoder.getAddress(lnglat, function(status, result) {
                if (status === 'complete' && result.regeocode) {
                  var address = result.regeocode.formattedAddress
                  that.form.address = address
                } else {
                  console.log('根据经纬度查询地址失败')
                }
              })
              that.dialogVisibleMap = false
            })
          })
          .catch(e => {
            //console.log(e);
          })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          chargeStationId: null,
          chargeStationCode: null,
          operatorCode: null,
          chargeStationName: null,
          chargeStationType: '1',
          chargeStationStatus: '50',
          parkNum: 1,
          buildingSite: null,
          administrativeArea: null,
          chargeStationAddress: null,
          chargeStationLongitude: null,
          chargeStationLatitude: null,
          nationalStandardInterface: [],
          auxiliarySourceVoltage: [],
          gunType: [],
          paymentMethod: [],
          parking: '0',
          parkingRate: null,
          serviceCharge: null,
          chargeStationStartTime: null,
          chargeStationEndTime: null,
          paymentChannels: [],
          appletName: '0',
          chargeStationFacilities: [],
          chargeStationScore: null,
          chargeStationPhoto: null,
          chargeStationPhone: null,
          chargeStationRemark: null,
          priceTypeCode: null
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.operatorCode = null
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.chargeStationId)
        this.codes = selection.map(item => item.chargeStationCode)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.selectUser()
        this.selectPriceTypeList()
        this.open = true
        this.title = '添加场站'
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        this.selectUser()
        this.selectPriceTypeList()
        const chargeStationId = row.chargeStationId || this.ids
        getStation(chargeStationId).then(response => {
          this.form = response.data
          this.form.nationalStandardInterface = this.form.nationalStandardInterface.split(',')
          this.form.auxiliarySourceVoltage = this.form.auxiliarySourceVoltage.split(',')
          this.form.gunType = this.form.gunType.split(',')
          this.form.paymentMethod = this.form.paymentMethod.split(',')
          this.form.paymentChannels = this.form.paymentChannels.split(',')
          this.form.chargeStationFacilities = this.form.chargeStationFacilities.split(',')
          this.open = true
          this.title = '修改场站'
        })
      },
      /** 提交按钮 */
      submitForm() {
        let that = this
        this.$refs['form'].validate(valid => {
          if (that.form.chargeStationLongitude == null || that.form.chargeStationLongitude == undefined
            || that.form.chargeStationLatitude == null || that.form.chargeStationLatitude == undefined) {
            that.$modal.msgError('请选择经纬度位置')
            return
          }
          if (valid) {
            this.form.nationalStandardInterface = this.form.nationalStandardInterface.join(',')
            this.form.auxiliarySourceVoltage = this.form.auxiliarySourceVoltage.join(',')
            this.form.gunType = this.form.gunType.join(',')
            this.form.paymentMethod = this.form.paymentMethod.join(',')
            this.form.paymentChannels = this.form.paymentChannels.join(',')
            this.form.chargeStationFacilities = this.form.chargeStationFacilities.join(',')
            if (this.form.chargeStationId != null) {
              updateStation(this.form).then(response => {
                this.$modal.msgSuccess('修改成功')
                this.open = false
                this.getList()
                this.getStationStatus()
              })
            } else {
              addStation(this.form).then(response => {
                this.$modal.msgSuccess('新增成功')
                this.open = false
                this.getList()
                this.getStationStatus()
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const chargeStationIds = row.chargeStationId || this.ids
        const chargeStationCodes = row.chargeStationCode || this.codes
        this.$modal
          .confirm('是否确认删除场站编号为"' + chargeStationCodes + '"的数据项？')
          .then(function() {
            return delStation(chargeStationIds)
          })
          .then(() => {
            this.getList()
            this.getStationStatus()
            this.$modal.msgSuccess('删除成功')
          })
          .catch(() => {
          })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          'operator/station/export',
          {
            ...this.queryParams
          },
          `station_${new Date().getTime()}.xlsx`
        )
      },
      /*查看设备详情*/
      viewStationInfo(row) {
        this.$router.push({
          name: 'viewStationInfo',
          query: {
            chargeStationId: row.chargeStationId
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .topNum {
    margin: 20px 0;

    h4 {
      font-size: 14px;
      color: #8d8d8d;
      margin: 0 !important;
    }

    p {
      font-size: 23px;
      margin: 10px 0 0 !important;
    }

    .topText {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .topBorder {
      border-right: 1px solid #f1f1f1;
    }
  }
</style>
